<template>
  <div class="home">
    <AnnouncementBar />
    <!-- 轮播图 -->
    <div class="section">
      <el-row justify="center">
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
          <el-carousel height="320px" class="hero-carousel">
            <el-carousel-item v-for="item in carouselItems" :key="item.id">
              <div class="carousel-content" :style="{ backgroundImage: `url(${item.image})` }">
                <div class="carousel-text">
                  <h2>{{ item.title }}</h2>
                  <p>{{ item.description }}</p>
                  <el-button type="primary" size="large" @click="goToPhotographers">
                    立即预约
                  </el-button>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </div>
    <!-- 服务特色 -->
    <div class="section">
      <h2 class="section-title">我们的服务</h2>
      <el-row :gutter="24" justify="center">
        <el-col :xs="24" :sm="8" v-for="feature in features" :key="feature.id">
          <el-card class="feature-card">
            <el-icon class="feature-icon" :size="50">
              <component :is="feature.icon" />
            </el-icon>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 热门摄影师 -->
    <div class="section" v-if="userStore.isLoggedIn">
      <h2 class="section-title">热门摄影师</h2>
      <el-row :gutter="24" justify="center">
        <el-col :xs="24" :sm="12" :md="6" v-for="photographer in hotPhotographers" :key="photographer.id">
          <el-card class="photographer-card" @click="goToPhotographer(photographer.id)">
            <img :src="photographer.avatar" class="photographer-avatar" />
            <h3>{{ photographer.name }}</h3>
            <p class="photographer-style">{{ photographer.style }}</p>
            <p class="photographer-intro">{{ photographer.intro }}</p>
            <el-rate v-model="photographer.rating" disabled />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div id="ai-chat-entry" style="position: fixed; right: 32px; bottom: 32px; z-index: 9999;">
      <el-button type="primary" circle size="large" @click="showAiChat = true">
        <el-icon><ChatDotRound /></el-icon>
      </el-button>
      <el-dialog v-model="showAiChat" title="智能客服" width="400px" :close-on-click-modal="false">
        <AiChatWidget />
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import AnnouncementBar from '@/components/AnnouncementBar.vue'
import { ChatDotRound } from '@element-plus/icons-vue'
import AiChatWidget from '@/components/AiChatWidget.vue'
import api from '../utils/api'

const router = useRouter()
const userStore = useUserStore()

const carouselItems = ref([
  {
    id: 1,
    title: '专业摄影服务',
    description: '为您提供高质量的摄影服务，记录美好瞬间',
    image: 'https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=1200&h=400&fit=crop'
  },
  {
    id: 2,
    title: '多样化拍摄风格',
    description: '婚纱、写真、纪实等多种风格任您选择',
    image: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=1200&h=400&fit=crop'
  },
  {
    id: 3,
    title: '便捷预约系统',
    description: '在线预约，轻松安排您的拍摄时间',
    image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=1200&h=400&fit=crop'
  }
])

const features = ref([
  {
    id: 1,
    icon: 'Camera',
    title: '专业摄影',
    description: '经验丰富的摄影师团队，为您提供专业的拍摄服务'
  },
  {
    id: 2,
    icon: 'Calendar',
    title: '灵活预约',
    description: '支持在线预约，时间灵活，满足您的各种需求'
  },
  {
    id: 3,
    icon: 'Star',
    title: '品质保证',
    description: '严格的质量控制，确保每一张照片都完美呈现'
  }
])

const hotPhotographers = ref([])

onMounted(async () => {
  try {
    const res = await api.get('/photo/photographer/list')
    hotPhotographers.value = (res.data || [])
      .sort((a, b) => (b.orderCount || 0) - (a.orderCount || 0))
      .slice(0, 4)
  } catch (e) {
    hotPhotographers.value = []
  }
})

const showAiChat = ref(false)

const goToPhotographers = () => {
  if (!userStore.isLoggedIn) {
    router.push({ name: 'login' })
  } else {
    router.push('/photographer-list')
  }
}

const goToPhotographer = (id: number) => {
  router.push(`/photographer/${id}`)
}
</script>

<style scoped>
.home {
  width: 100%;
  min-height: 100vh;
  background: #f7f8fa;
  padding: 32px 0 64px 0;
  position: absolute;
  left: 0;
  top: 0;
}

.section {
  max-width: 1200px;
  margin: 0 auto 48px auto;
  width: 100%;
}

.section-title {
  text-align: center;
  margin-bottom: 32px;
  font-size: 2rem;
  color: #333;
  font-weight: 600;
}

.hero-carousel {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
}

.carousel-content {
  height: 320px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.carousel-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.carousel-text {
  text-align: center;
  color: white;
  z-index: 1;
  position: relative;
}

.carousel-text h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.carousel-text p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.features {
  margin-bottom: 60px;
}

.feature-card {
  text-align: center;
  padding: 30px 20px;
  height: 200px;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  color: #409eff;
  margin-bottom: 20px;
}

.feature-card h3 {
  margin-bottom: 15px;
  color: #333;
}

.feature-card p {
  color: #666;
  line-height: 1.6;
}

.hot-photographers {
  margin-bottom: 40px;
}

.photographer-card {
  cursor: pointer;
  transition: transform 0.3s;
  text-align: center;
}

.photographer-card:hover {
  transform: translateY(-5px);
}

.photographer-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.photographer-card h3 {
  margin-bottom: 10px;
  color: #333;
}

.photographer-style {
  color: #409eff;
  font-weight: bold;
  margin-bottom: 10px;
}

.photographer-intro {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 15px;
  line-height: 1.4;
}
</style> 